<template>
  <div class="typeThree">
    <div class="question-wrap" v-if="itemQuestions && itemQuestions.length > 0">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="question-item" v-for="item in itemQuestions">
          <div class="question-item-top">
            <div class="img">
              <img :src="item.question.item_img" alt="">
            </div>
            <div class="title">{{ item.question.item_title }}</div>
          </div>
          <div class="question-item-middle">
            {{ item.comment }}
          </div>
          <div class="question-item-bottom part2">
            <div class="tips"><span class="name">{{ item.question.nickname }}</span></div>
            <!--<div class="btn fr"><svg-icon icon-class="icon_delete" /><span> 删除</span></div>-->
          </div>
        </div>
      </van-list>
  
    </div>
    <div v-if="totalPage <= 0 && isShowNoData">
      <no-data :noData=noData></no-data>
    </div>
  </div>
  
</template>

<script>
  import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)

  import noData from '@/components/noData/index'
  import { myAnswers } from '@/api/item/question'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        itemInfo: {},
        locked: true,
        loading: false,
        finished: false,
        isShowNoData: false,
        comment: '',
        totalPage: 0,
        itemQuestions: [],
        postData: {
          item_id: '',
          page: 2,
          per_page: 10
        },
        noData: {
          width: '184px',
          marginTop: '100px',
          txtMarginTop: '-30px',
          img: 'https://img.wifenxiao.com/h5-wfx/images/item/question/noData.png',
          text: '还没有回答过问题哦~'
        }
      }
    },
    components: {
      noData
    },
    mounted() {
      this.init()
    },
    methods: {
      onLoad() {
        if (this.finished) return false
        if (!this.locked) {
          const param = this.postData
          myAnswers(param).then(res => {
            this.$loadingWrap.close()
            this.isShowNoData = true
            this.loading = false
            if (res.status == 1) {
              this.itemQuestions.push(...res.data.my_answers)
              if (res.data.my_answers.length < 10) {
                this.finished = true
              }
              this.postData.page++
            }
          })
        }
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      },
      // 问题列表
      myAnswersFn() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        const param = Object.assign({}, this.postData, true)
        param.page = 1
        myAnswers(param).then(res => {
          this.$loadingWrap.close()
          this.isShowNoData = true
          this.loading = false
          if (res.status == 1) {
            this.itemQuestions = res.data.my_answers
            this.totalPage = res.data.total_page
            if (res.data.my_answers.length < 10) {
              this.finished = true
            }
            this.locked = false
          }
        })
      },
      /**
       * 初始化
       */
      init() {
        this.myAnswersFn()
      }
    }
  })
</script>

<style lang="scss">
  @import "src/styles/item/question";
</style>
